import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay } from 'swiper/modules'
import { Image, Row, Col, Tag, Grid, GridItem, Empty, Cell, List, Toast } from 'tdesign-mobile-react'
import 'swiper/css';
import React, { useState, useCallback, useEffect } from 'react';
import 'swiper/css/pagination';
import Blank from '../../components/blank/blank';
import footBallIcon from '../../assets/images/footBallIcon.png';
import { Link, useNavigate } from "react-router-dom";
import './index.scss';
import { LoudspeakerIcon, ChartLineIcon, EllipsisIcon } from "tdesign-icons-react";

//  轮播图组件
function SwiperComponent(props) {
    const { data } = { ...props }
    return (<>
        <div className="swiper-main-container">
            <Swiper
                modules={[Autoplay]}
                spaceBetween={0}
                slidesPerView={1}
                loop={true}
                autoplay={{
                    delay: 2400,
                }}
                className='first-swiper'
            >
                {data.map((item) => {
                    return (<>
                        <SwiperSlide key={item.id}>
                            <Image fit='contain' src={item.src} alt="error" />
                        </SwiperSlide>
                    </>)
                })}
            </Swiper>
        </div>
    </>)
}
// 网站公告
function Tell() {
    const tellList = [{
        id: 0,
        content: "这是一条公告公告"
    }, {
        id: 1,
        content: "够钟死心了"
    }]
    return (<>
        <div className='tell-container'>
            <Row align='middle'>
                <Col span={4}>
                    <Tag size="large" icon={<LoudspeakerIcon />} color="red">公告</Tag>
                </Col>
                <Col span={20}>
                    <Swiper
                        modules={[Autoplay]}
                        spaceBetween={0}
                        direction="vertical"
                        slidesPerView={1}
                        loop={true}
                        autoplay={{
                            delay: 4500,
                        }}
                        className="tell-swiper"
                    >
                        {tellList.map((item) => {
                            return (<>
                                <SwiperSlide key={item.id}>
                                    <span className='tell-items'>{item.content}</span>
                                </SwiperSlide>
                            </>)
                        })}
                    </Swiper>
                </Col>
            </Row></div>
    </>)
}
// 红人榜单

function HotRank() {
    let nav = useNavigate();
    console.log("加载红人榜单");
    const [data, setData] = useState([]);
    // 模拟http请求
    const fetchData = useCallback(() => {
        setTimeout(() => {
            for (let i = 0; i < 10; i++) {
                let field = {
                    avg: "https://img.alicdn.com/imgextra/i2/O1CN016M1mhC1aU6kEKNeBU_!!6000000003332-2-tps-96-96.png",
                    name: "玩家名字名字",
                    amount: i * 10,
                    odds: i * 0.78
                };
                data.push(field);
            }
            setData([...data]);
        }, 1000);
    }, [data])
    useEffect(() => {
        fetchData();
    }, [])

    if (data.length === 0) {
        return (<>
            <Col>
                <Empty description="暂无数据"
                    icon={<EllipsisIcon strokeWidth={1} />}
                />
            </Col>
        </>)
    } else {


        return (<>
            <Col span={24}>
                <List>
                    {data.map((item, index) => {
                        return (<React.Fragment key={index}>
                            <Cell
                                leftIcon={
                                    <Image src={item.avg}></Image>
                                }
                                title={item.name} arrow
                                description={
                                    <span className='cell-desc'>
                                        累计中奖：<b>{item.amount}%</b> {item.odds}
                                    </span>
                                }
                                onClick={() => nav("/detail")}
                            />
                        </React.Fragment>)
                    })}
                </List>
            </Col>
        </>)
    }

}
// 首页内容
function Indexs() {
    const swiperList = [{
        id: 1,
        src: "https://ts1.tc.mm.bing.net/th?id=OADD2.1181975018202601_1874A22RFMI1A5A&pid=21.2&c=16&roil=0&roit=0&roir=1&roib=1&w=612&h=304&dynsize=1&qlt=90&dpr=1.50"
    }, {
        id: 2,
        src: "https://assets.iredwhale.com/2025/7/23/1753236397480-147712.jpg"
    }];// 轮播图数据
    const entryList = [{
        id: 0,
        path: "/play/football",
        name: "竞彩足球",
        icon: footBallIcon
    }, {
        id: 1,
        path: "/play/baseketball",
        name: "竞彩篮球",
        icon: footBallIcon
    }, {
        id: 2,
        path: "/rank3",
        name: "排列3",
        icon: footBallIcon
    }];
    return (<>
        <div className='index-container'>
            <Row>
                <Col span={24}>
                    <SwiperComponent data={swiperList} />
                </Col>
            </Row>
            <Blank size="0"></Blank>
            <Row>
                <Tell></Tell>
            </Row>
            <Blank size="12"></Blank>
            <div className='common-card'>
                <Row className='entry-container'>
                    <Col>
                        <span className='logo-text'> 体育彩票 </span>
                    </Col>
                </Row>
                <Row>
                    <Grid align="center" className='fill-parent' column="3" >
                        {playerEntry(entryList)}
                    </Grid>
                </Row>
            </div>
            <Blank size="6"></Blank>
            <div className='common-card'>
                <Row className='hot-activites' gutter={4}>
                    <Col>
                        <ChartLineIcon />
                    </Col>
                    <Col>
                        <span className='logo-text hot'> 红人榜单 </span>
                    </Col>
                </Row>
                <Blank size={8}></Blank>
                <Row className="layout-center">
                    {HotRank}
                </Row>
            </div>
        </div>
    </>)
}
// 玩法入口
function playerEntry(list) {
    return list.map((item) => {
        return (<React.Fragment key={item.id}>
            <GridItem text={item.name} image={
                <Link to={item.path}>
                    <Image src={item.icon} className='entry-link-icon'></Image>
                </Link>
            } layout="vertical" />
        </React.Fragment>)
    })
}

export default Indexs;